<template>
    <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="销售出库单" name="receive"></el-tab-pane>
        <el-tab-pane label="采购入库单" name="storage"></el-tab-pane>
        <el-tab-pane label="销售退货单" name="refund"></el-tab-pane>
        <el-tab-pane label="采购退货单" name="storagerefund"></el-tab-pane>
        <el-tab-pane label="销售回瓶单" name="empties"></el-tab-pane>
        <el-tab-pane label="采购回瓶单" name="storageempties"></el-tab-pane>
        <!-- <el-tab-pane label="还货出库单" name="backGoods"></el-tab-pane> -->
        <el-tab-pane label="销售配送单" name="applyDeliveryFee"></el-tab-pane>
        <el-tab-pane label="采购配送单" name="purchaseDeliveryFee"></el-tab-pane>
        <el-tab-pane label="销售押金单" name="applyDepositFee"></el-tab-pane>
        <el-tab-pane label="采购押金单" name="purchaseDepositFee"></el-tab-pane>
    </el-tabs>
    <Suspense>
        <template #default>
			<keep-alive>
				<component :is="activeComponent"/>
            </keep-alive>
        </template>
        <template #fallback>
            <el-skeleton :rows="3" />
        </template>
    </Suspense>
</template>

<script>
import { defineAsyncComponent } from "vue";
export default {
    name: "documentorder",
    components: {
        receive: defineAsyncComponent(() => import("./receive.vue")),
        storage: defineAsyncComponent(() => import("./storage.vue")),
        refund: defineAsyncComponent(() => import("./refund.vue")),
        storagerefund: defineAsyncComponent(() =>
            import("./storagerefund.vue")
        ),
        empties: defineAsyncComponent(() => import("./empties.vue")),
        storageempties: defineAsyncComponent(() =>
            import("./storageempties.vue")
        ),
        backGoods: defineAsyncComponent(() => import("./backGoods.vue")),
        purchaseDeliveryFee: defineAsyncComponent(() =>
            import("./purchaseDeliveryFee.vue")
        ),
        applyDeliveryFee: defineAsyncComponent(() =>
            import("./applyDeliveryFee.vue")
        ),
        applyDepositFee: defineAsyncComponent(() =>
            import("./applyDepositFee.vue")
        ),
        purchaseDepositFee: defineAsyncComponent(() =>
            import("./purchaseDepositFee.vue")
        ),
    },
    data() {
        return {
            activeName: "receive", // 初始显示的标签页名称应该对应el-tab-pane的name属性
            activeComponent: "receive", // 初始显示的组件名称
        };
    },
    methods: {
        handleClick(tab, event) {
			this.$nextTick(() => {
				// 处理标签页点击事件
				console.log(tab.props.name); // 输出当前标签页的名称
				this.activeComponent = tab.props.name;
			});
        },
    },
    async mounted() {
        var type = this.$route.query.type;
        if (type) {
			this.activeName=type;
            this.activeComponent = type;
        }
    },
};
</script>

<style>
</style>
